<template>
  <div>
    <p class="title">提现列表</p>
    <div class="head">
      <div>
        <el-button-group>
          <el-button v-for="item in options" :key="item.id" @click="handleChange(item.id)"
            :type="query.days==item.id?'info':''" size="small">{{item.text}}
          </el-button>
        </el-button-group>
        <el-date-picker v-model="date" @change="dateChange" type="daterange" value-format="yyyy-MM-dd" size="small"
          unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <el-input v-model="query.content" @change="search" class="input" size="small" prefix-icon="el-icon-search"
        placeholder="请输入用户账号">
      </el-input>
    </div>
    <div class="price-box">
      <h3>充值金额总计：{{withdrawalMoney1}}元</h3>
      <h3>已通过审核金额总计：{{withdrawalMoney1}}元</h3>
    </div>
    <div>
      <el-table ref="singleTable" :data="tableData" highlight-current-row border style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="80"> </el-table-column>
        <el-table-column prop="account" label="用户账号" align="center">
        </el-table-column>
        <el-table-column prop="diamonds" label="提现钻石" align="center">
        </el-table-column>
        <el-table-column prop="woMoney" label="提现金额" align="center">
        </el-table-column>
        <el-table-column prop="woTime" label="提现申请时间" align="center">
        </el-table-column>
        <el-table-column prop="payMethod" label="支付方式" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.payMethod==1">支付宝</span>
            <span v-else-if="scope.row.payMethod==2">微信</span>

          </template>
        </el-table-column>
        <el-table-column prop="reviewerName" label="审核人" align="center"> </el-table-column>
        <el-table-column prop="auditTime" label="审核时间" align="center">
        </el-table-column>
        <el-table-column prop="reason" label="不通过原因" align="center"> </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.woState==1">审核中</span>
            <span v-else-if="scope.row.woState==2">审核通过</span>
            <span v-else-if="scope.row.woState==3">未通过</span>


          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="pass(scope.row)" type="text" size="small">通过</el-button>
            <el-button @click="noPass(scope.row)" type="text" size="small">不通过</el-button>
            <!-- 通过弹框 -->
            <el-dialog title="提示" :visible.sync="dialogVisible1" width="400px" center>
              <span>是否确认通过审核?</span>
              <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" size="small" @click="confirm">确 定</el-button>
              </span>
            </el-dialog>

            <!-- 不通过 -->
            <el-dialog title="审核不通过" :visible.sync="dialogVisible2" width="500px" center>
              <el-form :model="row" label-width="120px">

                <el-form-item label="请填写原因：">
                  <el-input v-model="row.reason" type="textarea" rows="5"></el-input>
                </el-form-item>



              </el-form>

              <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" size="small" @click="confirm">确 定</el-button>
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <Page :total="total" :PageNumber.sync="query.pageNumber" :PageSize.sync="query.pageSize"
        @current-change="changeCurrentPage" @size-change="handleSizeChange">
      </Page>
    </div>
  </div>
</template>

<script>
  import Page from "@/components/page.vue";
  import financial from "@/apis/modules/financial"

  export default {
    components: {
      Page,
    },
    data() {
      return {
        days: "",
        options: [
          { text: "今天", id: 1 },
          { text: "近7天", id: 7 },
          { text: "近30天", id: 30 },
        ],

        date: null,
        query: {
          days: "",//1 7 30
          starttime: "",//开始时间
          endtime: "",//结束时间
          content: "",//搜索内容
          pageNumber: 1,//当前页数
          pageSize: 10,//每页显示多少条
        },
        total: 0,
        tableData: [],
        withdrawalMoney1: 0,
        withdrawalMoney2: 0,
        dialogVisible1: false,
        dialogVisible2: false,
        row: {},
      };
    },
    created() {
      this.getWithdrawalOrder()
    },
    methods: {
      search() {
        this.query.pageNumber = 1;
        this.getWithdrawalOrder()
      },
      // 获取提现列表
      async getWithdrawalOrder() {
        const { code, data, msg } = await financial.getWithdrawalOrder(this.query)
        if (code == 200) {
          this.total = data.count;
          this.tableData = data.list;
          this.withdrawalMoney1 = 0
          this.withdrawalMoney2 = 0
        }
      },
      // 选择天数
      handleChange(id) {
        this.query.days = id;
        this.search()
      },
      // 改变日期
      dateChange(date) {
        if (date != null) {
          this.query.starttime = date[0];
          this.query.endtime = date[1];
        } else {
          this.query.starttime = "";
          this.query.endtime = "";
        }
        this.search()
      },
      // 通过
      pass(row) {
        this.dialogVisible1 = true;
        row.woState = 2
        this.row = JSON.parse(JSON.stringify(row))
      },
      // 不通过
      noPass(row) {
        this.dialogVisible2 = true;
        row.woState = 3
        this.row = JSON.parse(JSON.stringify(row))
      },
      //确认通过
      async confirm() {
        let { woId, woState, reason } = this.row;
        const { code, data, msg } = financial.updateWithdrawalOrder({
          woId, woState, reason
        });
        if (code == 200) {
          this.$message.success(msg)

        }
      },
      //改变当前页数
      changeCurrentPage(val) {
        this.getWithdrawalOrder()
      },
      //改变每页显示条数
      handleSizeChange(val) {
        this.getWithdrawalOrder()
      },

    },
  };

</script>

<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .el-button-group {
    margin-right: 32px;
  }

  .price-box {
    margin: 16px 0;
    padding: 0 16px;
    display: flex;
    background-color: #f2f2f2;
    line-height: 50px;


  }

  h3:first-child {
    margin-right: 200px;
  }

  .el-input {
    width: 300px;
  }
</style>